import { useState } from 'react';
import { useHistory } from 'react-router-dom';

import type { LocationState } from './location';
// import App from './App';

export const App2 = () => {
  const history = useHistory<LocationState>();

  const [visible, setVisible] = useState(true);

  // 页面事件
  const handleSwitch = () => {
    // 跳转app3,不传递参数
    history.push('/app3');
    // 额外传参
    // history.push('/app3', {
    //   from: '/app2',
    // });
    // 第二种书写方式和上面等价
    history.push({
      pathname: '/app3',
      state: {
        from: 'app2',
      },
    });
  };

  return (
    <div>
      <h1>App2</h1>
      {/* {visible ? <App /> : null} */}
      <button onClick={() => setVisible(!visible)}>消失/显示</button>
      <button onClick={handleSwitch}>跳转到3</button>
    </div>
  );
};
